<template>
  <div>
    <!--头部-->
    <div class="back" @click="tohome">
      <i class="el-icon-close"></i>订单配送
    </div>
    <!--地图-->
    <div class="box">
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="box1" :plugin="plugins">
        <el-amap-marker v-for="(marker, index) in markers"
                        :position="marker.position"
                        :vid="index"
                        :key="index"
        >
        </el-amap-marker>
        <el-amap-text  :text="text" :offset="offset" :position="textposition"></el-amap-text>
      </el-amap>
  </div>
    <!--商品-->
    <div class="goodslist">
      <div class="shopname">
        <div class="name-left">{{name}}<i class="el-icon-arrow-right"></i></div>
      </div>
      <div class="detaillist">
        <ul>
          <li v-for="item of foods">
            <div class="detail-left">
              <img :src="item.image">
              {{item.name}}
            </div>
            <div class="detail-right">
              <span style="font-size: 10px;font-weight: bold;float: left">x{{item.count}}</span>
              <span style="font-size: 12px;color: #cccccc;display:inline-block;text-decoration: line-through;text-align: center" v-show="item.oldPrice !=''">￥{{item.oldPrice}}</span>
              <span style="font-size: 16px;font-weight: bold;float:right;margin-right: 5px">￥{{item.price}}</span>
            </div>
          </li>
          <li>
            <div class="detail-left">
              <img src="">
              配送费
            </div>
            <div class="detail-right">
              <span style="font-size: 10px;font-weight: bold;float: left">x1</span>
              <span style="font-size: 12px;color: #cccccc;text-decoration: line-through;text-align: center"></span>
              <span style="font-size: 16px;font-weight: bold;float:right;margin-right: 5px">￥4</span>
            </div>
          </li>
          <li>
            <div class="detail-left">
              <img src="">
              餐盒费
            </div>
            <div class="detail-right">
              <span style="font-size: 10px;font-weight: bold;float: left">x1</span>
              <span style="font-size: 12px;color: #cccccc;text-decoration: line-through;text-align: center"></span>
              <span style="font-size: 16px;font-weight: bold;float:right;margin-right: 5px">￥2</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="pay">
        <div class="pay-left">
        <i class="el-icon-phone-outline"></i>联系商家
        </div>
        <div class="pay-right">
          实付  ￥<span>{{totalPrice}}</span>
        </div>
      </div>
    </div>
    <!--配送信息-->
    <div class="distribution">
      <div class="distribution-header">配送信息</div>
      <div class="dis-list">
        <ul>
          <li>
          <div class="li-left">送达时间</div>
          <div class="li-right">尽快送达</div>
        </li>
          <li>
            <div class="li-left">收货地址</div>
            <div class="li-right">
              广东石油化工学院1a909
            </div>
          </li>
          <li>
            <div class="li-left">收货人</div>
            <div class="li-right">小白（先生） 13336550040</div>
          </li>
          <li>
            <div class="li-left">配送方式</div>
            <div class="li-right">商家配送</div>
          </li>
        </ul>
      </div>
    </div>
    <!--订单信息-->
    <div class="distribution">
      <div class="distribution-header">订单信息</div>
      <div class="dis-list">
        <ul>
          <li>
            <div class="li-left">送达时间</div>
            <div class="li-right">尽快送达</div>
          </li>
          <li>
            <div class="li-left">订单号</div>
            <div class="li-right">
              123124214214124124124<span style="color:blue;margin-left: 8px;" @click="copy">复制</span>
            </div>
          </li>
          <li>
            <div class="li-left">支付方式</div>
            <div class="li-right">在线支付</div>
          </li>
          <li>
            <div class="li-left">下单时间</div>
            <div class="li-right">2019-05-09 11:52:31</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        zoom: 16,
        center: [110.92191, 21.679489],
        plugins: ['OverView', 'MapType', 'Scale', 'Toobar', 'Geolocation'],
        text: '预计45分钟后送达',
        offset: [-10, -34],
        textposition: [110.92191, 21.679489],
        markers: [
          {
            position: [110.92191, 21.679489]
          }
        ],
        foods: this.$route.params.foods,
        name: this.$route.params.name,
        totalPrice: this.$route.params.total
      }
    },
    methods: {
      copy () {
        this.$toast.center('复制成功')
      },
      tohome () {
        this.$router.push('/')
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .back{
    width :100%;
    height :40px;
    background-color :blue;
    line-height :40px;
    color :white;
    padding-left :10px;
    font-size :14px;
  }
  .back i{
    margin-right :20px;
    font-size :18px;
  }
  .box {
    margin-top: 5px;
    width:96%;
    margin-left: 2%;
    height:250px;
    box-shadow: 1px 1px 2px #cccccc;
  }
  .box1 {
    width:100%;
    height: 250px;
  }
  .goodslist {
    width: 96%;
    margin-top: 10px;
    box-shadow: 1px 1px 2px #cccccc;
    margin-left: 2%;
    padding-bottom: 25px;
  }
  .shopname {
    padding: 15px 0;
    border-bottom: 1px solid rgba(7,17,27,.1);
  }
  .shopname .name-left{
    display: inline-block;
    font-weight:bold;
  }
  .name-left i {
    color: #cccccc;
    margin-left: 5px;
  }
  .shopname>span {
    float: right;
    text-align: center;
    background-color: green;
    color: white;
    font-size: 14px;
    border-radius: 5px;
    padding: 4px 8px;
    margin-right: 5px;
  }
  .detaillist {
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(7,17,27,.1);
  }
  .detaillist ul li {
    list-style: none;
    padding: 10px 0;
  }
  .detail-left {
    display: inline-block;
    width: 50%;

  }
  .detail-left>img {
    width: 40px;
    height: 40px;
    vertical-align: middle;
  }
  .detail-right {
    display: inline-block;
    width: 48%;
    text-align: center;
  }
  .goodslist .pay {
    width: 100%;
    padding: 10px 0;
    line-height: 30px;
  }
  .pay .pay-left {
    float: left;
    color: blue;
    font-size: 14px;
  }
  .pay-left i {
    margin-right: 5px;
  }
  .pay-right {
    float: right;
    font-size: 16px;
    font-weight: bold;
    margin-right: 5px;
  }
  .pay-right>span {
    color: red;
    font-size: 18px;
  }
  .distribution {
    width: 96%;
    padding-bottom: 20px;
    margin-top: 20px;
    margin-left: 2%;
    box-shadow: 1px 1px 2px #cccccc;
    height: 200px;
  }
  .distribution .distribution-header {
    font-size: 18px;
    font-weight: bold;
    line-height: 40px;
  }
  .distribution .dis-list {
    width: 100%;
  }
  .dis-list ul li {
    list-style: none;
    font-size: 14px;
    color: rgba(0,0,0,.6);
    line-height: 40px;
    border-top: 1px solid rgba(7,17,27,.1);
  }
  .li-left {
    display: inline-block;
    width: 28%;
    color: rgba(0,0,0,.8);
  }
  .li-right {
    display: inline-block;
    width: 70%;
    text-align: right;
  }


</style>
